body {
  background: url('/static/image/form-bg.jpg') no-repeat center / cover;
}

#form {
  width: 120rem;
  margin: auto;
}

.form-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 33rem;
  height: 34rem;
  &.submit-container {
    height: 65rem;
    .content {
      height: 56rem;
    }
  }
  .title {
    img {
      display: block;
      width: 70%;
      margin: 0 auto 0;
    }
  }
  .content {
    position: relative;
    box-sizing: border-box;
    padding: 3rem;
    margin-top: 2rem;
    background-color: rgba($color: #fff, $alpha: .1);
    border-radius: .3rem;
    .input-row {
      margin-bottom: 2rem;
    }
    .key,
    .val {
      display: inline-block;
    }
    .key {
      width: 6rem;
      color: #e8c765;
      text-align: right;
      margin-right: 1rem;
    }
    .val {
      width: 19rem;
    }
    .none {
      display: none;
    }
  }
  .layui-btn {
    display: block;
    width: 15rem;
    margin: 3rem auto;
  }
  .code {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 0;
    width: 8rem;
    height: 3.2rem;
    border-left: .1rem solid #ccc;
    img {
      width: 100%;
      height: 100%;
      cursor: pointer;
      border-top-right-radius: .3rem;
      border-bottom-right-radius: .3rem;
    }
  }
  .code-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 8.2rem;
    height: 3.8rem;
    margin: 0;
    background-color: #fff;
    color: #333;
    &:hover {
      border-color: #ccc;
    }
  }
  .code-row {
    display: none;
  }
  a {
    position: absolute;
    bottom: .5rem;
    right: 2rem;
    color: #e8c765;
    text-decoration: underline;
  }
  p {
    color: #e8c765;
    margin-bottom: 2rem;
  }
  input[name="code"] {
    width: 10.9rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .relative {
    position: relative;
  }
}

.login-container {
  .content {
    .key {
      width: 5rem;
    }
  }
}

.layui-btn,
.layui-input {
  border-radius: .3rem;
}